<template>
  <el-row class="home">
    <NavBar @change_tag="change_tag" :is_active="is_active"></NavBar>
    <el-row class="frame-thin">
      <NodeAnalysis v-show="is_active===1" @change_tag="change_tag"></NodeAnalysis>
      <Retrieval v-if="is_active===2" :pkg_to_show="pkg_to_show" :platform="platform_to_show"></Retrieval>
      <VulnAnalysis v-if="is_active===3" :pkg_to_analyse="pkg_to_show" :platform="platform_to_show" @change_tag="change_tag"></VulnAnalysis>
    </el-row>
    <el-row class="frame-wide">
      <FineGrainedAnalysis v-if="is_active===4" @change_tag="change_tag"></FineGrainedAnalysis>
    </el-row>
  </el-row>
</template>


<script>
import NavBar from  '@/components/modules/NavBar'
import Retrieval from '@/components/views/Retrieval'
import NodeAnalysis from '@/components/views/NodeAnalysis'
import VulnAnalysis from '@/components/views/VulnAnalysis'
import FineGrainedAnalysis from "@/components/views/CallGraphAnalysis"


export default {
  name: 'Home',
  components: {
    NavBar,
    Retrieval,
    NodeAnalysis,
    VulnAnalysis,
    FineGrainedAnalysis,
  },
  data() {
    return {
      is_active: 1,
      pkg_to_show: "",
      platform_to_show: "",
    }
  },
  methods: {
    change_tag: function (data) {
      this.is_active = data["to"]
      this.pkg_to_show = data["pkg"]
      this.platform_to_show = data["platform"]
    }
  }
}
</script>

<style scoped>
.frame-thin {
  width: 80%;
  margin-left: 10%;
  margin-top: 4%;
}
.frame-wide {
  width: 90%;
  margin-left: 5%;
}
</style>